<template>
  <div id>
    <div class="boxs">
      <div class="boxs_left"></div>
      <div class="boxs_right">
        <div class="dmoney">
          <span class="b_title">快捷捐物</span>
          <div class="b_form">
            <el-form label-width="80px" action>
              <el-form-item label="物品描述" style="margin-left: 20%;">
                <el-input
                  style="width: 250px;"
                  v-model="donationText"
                ></el-input>
              </el-form-item>
              <el-form-item label="物品图片" style="margin-left: 20%;">
                <input type="file" @change="selectPhoto($event)" />
              </el-form-item>
              <el-form-item label="留言" style="margin-left: 20%;">
                <el-input
                  style="width: 250px;"
                  v-model="leavingMessage"
                ></el-input>
              </el-form-item>

              <div id style="position: relative;margin-left: 20%;color: red;">
                (捐赠物品，多少无拘。感谢您对青少年的关爱！)
              </div>
              <br />
              <div style="margin-left: 40%;">
                <el-radio v-model="radio" label="1">匿名</el-radio>
                <el-radio v-model="radio" label="2">实名</el-radio>
                <span class="jw" @click="toJq">去捐钱>></span>
              </div>
              <el-button
                type="success"
                style="margin-left: 45%;width: 120px;margin-top: 5%;"
                @click.native="dgoods"
                >立即捐赠</el-button
              >
              <div ref="myroot"></div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="html" >
			
    </div>-->
  </div>
</template>

<script>
import { dgoods } from "network/pay";
import $ from "jquery";
import Vue from "vue";
export default {
  data() {
    return {
      radio: "1",
      form: {
        name: "",
        money: ""
      },
      name: "",
      money: "",
      html: "",
      info: "",
      amount: "",
      donationText: "",
      file: "",
      leavingMessage: "",
      id: ""
    };
  },

  watch: {
    html() {
      this.html = this.html;
    },
    info() {
      this.info = this.info;
    },
    amount() {
      this.amount = this.amount;
    }
  },
  methods: {
    selectPhoto(event) {
      console.log("file对象为：");
      console.log(event.target.files);
      this.file = event.target.files;
    },
    dgoods() {
      this.id = this.$route.query.recipientId;
      let file = this.file; //一个文件流
      let formData = new FormData();
      formData.append("file", file[0]);
      formData.append("donationText", this.donationText);
      formData.append("id", this.id);
      formData.append("leavingMessage", this.leavingMessage);
      dgoods(formData).then(res => {
        console.log(res);
        if (res.code == 0) {
          this.$message({
            showClose: true,
            message: "恭喜您捐款成功！",
            type: "success"
          });
        }
      });
    },
    toJq() {
      this.$router.push({
        path: "/pay",
        query: {
          recipientId: this.$route.query.recipientId
        }
      });
    }
  },
  watch: {
    file() {
      this.file = this.file;
    }
  }
};
</script>

<style>
.boxs {
  width: 100%;
  height: 800px;
}

.boxs_left {
  width: 40%;
  height: 50%;
  float: left;
  margin: 5%;
  background-image: url(../../assets/image/home/paybg.png);
  background-position: center center;
  background-size: cover;
  border-radius: 10px;
  cursor: pointer;
}

.boxs_left:hover {
  box-shadow: inset 0px 0px 10px #fff, inset -10px 0px 20px #0ff,
    inset 0px 0px 20px #f0f, inset -10px 0px 20px #0ff, 0px 0px 10px #fff,
    -10px 0px 10px #f0f, 10px 0px 10px #0ff;
}

.boxs_right {
  width: 40%;
  height: 90%;
  float: left;
  margin-top: 5%;
}

.b_title {
  width: 86px;
  height: 24px;
  position: relative;
  left: 55%;
}

.b_form {
  width: 90%;
  height: 75%;

  position: relative;
  margin: 10%;
}

.dmoney {
  width: 100%;
  height: 100%;
  float: left;
}
.jw {
  color: red;
  margin-left: 10px;
}
.jw:hover {
  cursor: pointer;
}
</style>
